<template>
  <el-row>
    <el-col :span="24">
      <div class="box">
        <div class="box-header">
          <el-col :span="2">
            <h3 class="box-title">项目立项</h3>
          </el-col>
          <!-- 搜索 -->
          <el-col :span="22">
            <el-cascader
              style="width: 20%;"
              placeholder="申报类型"
              v-model="searchType"
              :options="options"
              :props="{ expandTrigger: 'hover', value: 'id', label: 'title' }"
              clearable
            ></el-cascader>
            <el-date-picker
              style="margin-left: 10px;"
              v-model="searchYear"
              type="year"
              value-format="yyyy"
              placeholder="申报年度"
            ></el-date-picker>
            <el-button class="btn-link-large add-btn" @click="Search()">
              <i class="el-icon-search el-icon--right"> 搜 索</i>
            </el-button>
          </el-col>
        </div>
        <!-- 一级菜单 -->
        <div class="box-body">
          <el-table
            :data="tableData"
            v-loading="loading"
            stripe
            style="width: 100%"
            @row-click="clickRow"
          >
            <el-table-column
              prop="id"
              label="ID"
              width="80"
              sortable
            ></el-table-column>
            <el-table-column
              prop="type"
              label="申报类型"
              sortable
              :formatter="showName"
              width="350"
            ></el-table-column>
            <el-table-column
              prop="year"
              label="申报年度"
              sortable
            ></el-table-column>
            <el-table-column
              prop="start_time"
              label="申报开始时间"
              sortable
            ></el-table-column>
            <el-table-column
              prop="end_time"
              label="申报结束时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column prop="status" label="状态">
              <template scope="scope">
                <el-tag
                  type="success"
                  v-if="scope.row.status == 1"
                  close-transition
                  width="80"
                  >进行中</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="scope.row.status == 2"
                  close-transition
                  >已结束</el-tag
                >
              </template>
            </el-table-column>
            <!--  <el-table-column label="操作" width="250" v-if="operating">
              <template slot-scope="scope">
                <el-button
                  v-popover:popover5
                  style="background: #367fa9;"
                  size="small"
                  type="primary"
                  icon="el-icon-video-play"
                  :disabled="scope.row.status == 2" 
                  @click.stop="apply(scope.row)"
                >申请</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next"
            :page-count="total"
            style="float: right;"
          ></el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import http from './../../../../assets/js/http'
export default {
  data() {
    return {
      currentPage: 1,
      total: 1,
      tableData: [],
      loading: true,
      searchType: [],
      searchYear: '',
      options: [],
      operating: false,
      saveData: {}
    }
  },
  methods: {
    apply(row) {
      router.push({ name: 'submidpro', params: { id: row.id, saveData: this.saveData }})
    },
    showName(row) {
      if (row.parent == this.options[0].id && row.children == 0) {
        // 14 实践育人项目
        return this.options[0].title
      } else if (row.parent == this.options[1].id) {
        // 15 学生工作精品项目
        let pName = this.options[1].title
        let cName
        this.options[1].children.forEach(element => {
          if (element.id == row.children) {
            cName = element.title
          }
        })
        return pName + ' / ' + cName
      }
    },
    Search() {
      this.saveData = {
        searchYear: this.searchYear,
        searchType: this.searchType
      }
      // this.getList()
      this.handleCurrentChange(this.currentPage)
    },
    // 点击培训信息下的页码，返回对应的数据
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.saveData.currentPage = this.currentPage
      // this.currentPage = this.$route.params.currentPage ? this.$route.params.currentPage : this.currentPage
      this.getList()
    },
    // 跳转子项目list
    clickRow(row) {
      router.push({
        name: 'middetailpro',
        params: { id: row.id, saveData: this.saveData }
      })
    },
    // 获取页面的项目类型下拉列表的数据
    init() {
      this.searchYear = this.$route.params.saveData
        ? this.$route.params.saveData.searchYear
        : ''
      this.searchType = this.$route.params.saveData
        ? this.$route.params.saveData.searchType
        : []
      this.currentPage = this.$route.params.saveData
        ? this.$route.params.saveData.currentPage
        : 1
      this.apiPost('admin/Report/DropdowmList').then(res => {
        this.handelResponse(res, data => {
          this.options = res.data.type
          // 获取页面的list
          // this.getList()
          this.Search()
        })
      })
    },
    getList() {
      this.loading = true
      let data = {
        page: this.currentPage,
        year: this.searchYear,
        parent: this.searchType.length >= 1 ? this.searchType[0] : '',
        children: this.searchType.length >= 2 ? this.searchType[1] : 0
      }
      this.apiPost('admin/Report/EduList', data).then(res => {
        this.handelResponse(res, data => {
          this.tableData = res.data.data
          this.total = Math.ceil(data.total / data.per_page)
        })
        this.loading = false
      })
    }
  },
  created() {
    _g.closeGlobalLoading()
    this.init()
    if (Lockr.get('userInfo').level === 1) {
      this.operating = true
    }
  },
  mounted() {},
  watch: {},
  mixins: [http]
}
</script>
<style scoped>
.box {
  position: relative;
  border-radius: 3px;
  background: #fff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #3c8dbc;
}
.box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  min-height: 0.01%;
  overflow-x: auto;
}
.box-header {
  height: 34px;
  line-height: 34px;
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
}
.button-group {
  margin-left: 13px;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
  /*margin-right: 50px;*/
}
.box-title {
  font-weight: 700;
  letter-spacing: 3px;
  display: inline-block;
  font-size: 18px;
  margin: 0;
  padding: 2px 0 0 20px;
}
.header-button {
  background-color: #3c8dbc;
  border-color: #367fa9;
}
.table-header {
  font-weight: bold;
}
.el-button--small {
  padding: 7px 9px;
}
.el-table .showwarn {
  background: oldlace;
}
.edit-btn {
  /*background: #367fa9;*/
  width: 60px;
  height: 28px;
}
.add-btn {
  background: #367fa9;
  margin: 0 10px;
}
.add-btn:hover {
  /* background: #367fa9; */
  background: #367fa9;
}
/*  .btn-link-large {
    padding: 13px 12px;
    font-size: 14px;
}*/
/* 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  background-color: #92cbf1 !important;
}

/*鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #92cbf1;
}</style
>>
